<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<!--<![endif]-->

<head>
  <!-- =====  BASIC PAGE NEEDS  ===== -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  <title>登录</title>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js" ></script>
  <script src="./js/crypto-js.js"></script>
  <script src="./js/ase.js"></script>
  <script src="js/verify.js" ></script>
  <!-- =====  SEO MATE  ===== -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="distribution" content="global">
  <meta name="revisit-after" content="2 Days">
  <meta name="robots" content="ALL">
  <meta name="rating" content="8 YEARS">
  <meta name="Language" content="en-us">
  <meta name="GOOGLEBOT" content="NOARCHIVE">
  <!-- =====  MOBILE SPECIFICATION  ===== -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="viewport" content="width=device-width">
  <!-- =====  CSS  ===== -->
  <link rel="stylesheet" type="text/css" href="css/verify.css">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
  <link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
  <link rel="shortcut icon" href="images/favicon.png">
  <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>

<body>
<div id="mpanel2" style="margin-top:50px;">

</div>
<div id="mpanel3" style="margin-top:50px;"></div>
  <!-- =====  LODER  ===== -->

    <div th:replace="~{template::topbar}"></div>
    <!-- =====  HEADER END  ===== -->
    <!-- =====  CONTAINER START  ===== -->
  <div th:utext="${msg}">
  </div>
    <div class="container mt_30">
      <div class="row ">
        <div class="col-sm-8 col-lg-9 mtb_20">
          <!-- contact  -->
          <div class="row">
            <div class="col-md-6 col-md-offset-3">
              <div class="panel-login panel">
                <div class="panel-heading">
                  <div class="row mb_20">
                    <div class="col-xs-6">
                      <a href="#" class="active" id="login-form-link">登录</a>
                    </div>
                    <div class="col-xs-6">
                      <a href="#" id="register-form-link">注册</a>
                    </div>
                  </div>
                  <hr>
                </div>
                <div class="panel-body">
                  <div class="row">
                    <div class="col-lg-12">
                      <form id="login-form" action="/loginCheck" method="post">
                        <div class="form-group">
                          <input type="text" name="username" id="username1" tabindex="1" class="form-control" placeholder="用户名" required>
                        </div>
                        <div class="form-group">
                          <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="密码" required>
                        </div>
                        <div class="form-group text-center">
                          <input type="checkbox" tabindex="3" class="" name="remember" id="remember">
                          <label for="remember"> 记住我 </label>
                        </div>
                        <div class="form-group">
                          <div class="row">
                            <div class="col-sm-6 col-sm-offset-3">
                              <input type="button" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="登录">
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="row">
                            <div class="col-lg-12">
                              <div class="text-center">
                                <a href="/forget" tabindex="5" class="forgot-password">忘记密码？</a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </form>
                      <form id="register-form" action="/toRegister" method="post">
                        <div class="form-group">
                          <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="用户名" required>
                        </div>
                        <div class="form-group">
                          <input type="password" name="password" id="password2" tabindex="2" class="form-control" placeholder="密码" required>
                        </div>
                        <div class="form-group">
                          <input type="number" name="phoneNumber" id="phoneNumber"  tabindex="1" class="form-control" placeholder="手机号码" required>
                        </div>
                        <div class="form-group">
                          <input type="text" name="address" id="address" tabindex="1" class="form-control" placeholder="收货地址" required>
                        </div>
                        <input type="hidden" name="roles" value="user">
                        <div class="form-group">
                          <div class="row">
                            <div class="col-sm-6 col-sm-offset-3">
                              <input type="button" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="注册">
                            </div>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  <script>
    $('#mpanel2').slideVerify({
      baseUrl:'http://81.69.237.173:8080',  //服务器请求地址, 默认地址为安吉服务器;
      containerId:'login-submit',//pop模式 必填 被点击之后出现行为验证码的元素id
      mode:'pop',  //展示模式
      imgSize : { //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
        width: '400px',
        height: '200px',
      },
      barSize:{ //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
        width: '400px',
        height: '40px',
      },
      beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
        let name=$('#username1').val()
        let pass=$('#password').val()
        if(name==''||pass==''){
          alert("请输入完整的信息！")
          return false
        }else{
          return true;
        }
      },
      ready : function() {
      },  //加载完毕的回调
      success : function(params) { //成功的回调
        $("#login-form").submit();
      },
      error : function() {
      }
    });
  </script>
  <script>
    $('#mpanel3').slideVerify({
      baseUrl:'http://81.69.237.173:8080',  //服务器请求地址, 默认地址为安吉服务器;
      containerId:'register-submit',//pop模式 必填 被点击之后出现行为验证码的元素id
      mode:'pop',  //展示模式
      imgSize : { //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
        width: '400px',
        height: '200px',
      },
      barSize:{ //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
        width: '400px',
        height: '40px',
      },
      beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
        let name=$('#username').val()
        let pass=$('#password2').val()
        let num=$('#phoneNumber').val()
        let add=$('#address').val()
        if(name==''||pass==""||num==''||add==''){
          alert("请输入完整的信息！")
          return false
        }else {
          return true;
        }

      },
      ready : function() {
      },  //加载完毕的回调
      success : function(params) { //成功的回调
        $("#register-form").submit();
      },
      error : function() {
      }
    });
  </script>
  <!-- Single Blog  -->
  <!-- End Blog   -->
  <!-- =====  CONTAINER END  ===== -->
  <!-- =====  FOOTER START  ===== -->
  <!-- =====  FOOTER END  ===== -->
<script src="js/jQuery_v3.1.1.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.firstVisitPopup.js"></script>
<script src="js/custom.js"></script>

</body>
</html>